<template>
	<div class="tab">
		<router-link tag='div' class="tabItem" to="/classic">
      <!-- <img :src="{{classicIcon}}" alt=""> -->
      <span class="tabLink classic">流行</span>
    </router-link>
    <router-link tag='div' class="tabItem" to="/book">
      <span class="tabLink book">书籍</span>
    </router-link>
    <router-link tag='div' class="tabItem" to="/my">
      <span class="tabLink my">我的</span>
    </router-link>
	</div>
</template>
<script>
	export default{
		name:'Tab',
    data(){
      return{
        classicIcon:'/assets/images/tab/classic.png'
      }
    }
	}
</script>
<style lang="stylus" scoped>
.tab{display:flex;flex-direction: row;justify-content: center;align-items: center;width:100%;height:50px;line-height:50px;font-size:12px;position:fixed;bottom:0;border-top:1px solid #f8f8f8;background:#fff;z-index:999;}
.tabItem{flex:1;text-align:center;touch-action: none;color:rgb(77,85,93);height:60px;overflow:hidden;}
.tabLink{display: inline-block;width:100%;line-height:86px;color:#c7c7c7;}
.router-link-active .tabLink{color:#000;}

.classic{background:url("../../assets/images/tab/classic.png") no-repeat center 8px;background-size:30px;}
.router-link-active .classic{background:url("../../assets/images/tab/classic@highlight.png") no-repeat center 8px;background-size:30px;}
.book{background:url("../../assets/images/tab/book.png") no-repeat center 8px;background-size:30px;}
.router-link-active .book{background:url("../../assets/images/tab/book@highlight.png") no-repeat center 8px;background-size:30px;}
.my{background:url("../../assets/images/tab/my.png") no-repeat center 8px;background-size:30px;}
.router-link-active .my{background:url("../../assets/images/tab/my@highlight.png") no-repeat center 8px;background-size:30px;}
  
</style>
